<template>
  <div class="order-container app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.ship_state" placeholder="订单状态" clearable class="filter-item select-item"
        @clear="handleFilter">
        <el-option v-for="item in orderStatus" :key="item.key" :label="item.name" :value="item.key" />
      </el-select>
      <el-input v-model="listQuery.id_public_goods_order_record" placeholder="订单ID" clearable
        class="filter-item input-item" @clear="handleFilter" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.receive_name" placeholder="收件人名称" clearable class="filter-item input-item"
        @clear="handleFilter" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.phone_user" placeholder="收件人联系方式" clearable class="filter-item input-item"
        @clear="handleFilter" @keyup.enter.native="handleFilter" />
      <el-date-picker v-model="orderTime" class="filter-item time-item" type="daterange" align="right" unlink-panels
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
        value-format="yyyy-MM-dd" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <div class="page-content">
      <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row
        style="width: 100%;">
        <el-table-column label="ID" prop="id" align="center" width="80" :class-name="getSortClass('id')">
          <template slot-scope="{row}">
            <span>{{ row.id_public_goods_order_record }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="{row}">
            <span v-for="(item, index) of orderStatus" v-show="item.key === row.ship_state" :key="index"
              :class="'state-text'+row.ship_state">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属门店" align="center">
          <template slot-scope="{row}">
            <span>{{ row.agent_name || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收件人" align="center">
          <template slot-scope="{row}">
            <span>{{ row.receive_name || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" align="center">
          <template slot-scope="{row}">
            <span>{{ row.phone_user || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.time_order }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleDetails(row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total>0" :total="total" :page.sync="currentPage" :limit.sync="listQuery.limit"
      @pagination="getPageList" />
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
import { orderList } from '@/api/order' // secondary package based on el-pagination
const orderStatus = [
  { key: 0, name: '已发货' },
  { key: 1, name: '已支付' },
  { key: 3, name: '配货中' },
  { key: 4, name: '已签收' },
  { key: 5, name: '已取消' },
  { key: 8, name: '支付失败' },
  { key: 9, name: '退货中' },
  { key: 10, name: '已退款' }
]
export default {
  name: 'Order',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      currentPage: 0,
      listLoading: true,
      orderStatus,
      orderTime: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      listQuery: {
        invoke_method: 'public_page_4m_user_order_4_balance',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        type_order: '1,4',
        receive_name: null,
        phone_user: null,
        id_public_goods_order_record: null,
        ship_state: null,
        pre_db_para_begin_time: null,
        pre_db_para_end_time: null,
        pre_db_para_time_search_switch: 'time_order',
        pre_db_para_order_by_para: ' time_order desc ',
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /*
    * 获取页面数据
    * */
    getList() {
      this.listLoading = true
      orderList(this.Qs.stringify(this.listQuery)).then(response => {
        this.list = response.order_list
        this.total = response.order_count

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    /*
    * 点击分页进行查询
    * */
    getPageList(val) {
      this.listQuery.pre_db_para_begin_idx = (val.page - 1) * this.listQuery.pre_db_para_length_4_list
      this.getList()
    },
    /*
    * 查询数据
    * */
    handleFilter() {
      console.log(this.orderTime)
      if (this.orderTime) {
        this.listQuery.pre_db_para_begin_time = this.orderTime[0] + ' 00:00:00'
        this.listQuery.pre_db_para_end_time = this.orderTime[1] + ' 23:59:59'
      } else {
        this.listQuery.pre_db_para_begin_time = null
        this.listQuery.pre_db_para_end_time = null
      }
      this.listQuery.pre_db_para_begin_idx = 0
      this.getList()
    },
    /*
     * 查看详情
     * */
    handleDetails(item) {
      this.$router.push({ name: 'Details', query: { order_id: item.id_public_goods_order_record }})
    },
    /*
    * 表格样式
    * */
    getSortClass(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>

<style lang="scss" scoped>
.state-text0 {
  color: #623615;
}
.state-text1 {
  color: #0d84e0;
}
.state-text3 {
  color: #ffd40a;
}
.state-text4 {
  color: #00b98d;
}
.state-text5 {
  color: #e3362a;
}
.state-text8 {
  color: #f4516c;
}
.state-text9 {
  color: salmon;
}
.state-text10 {
  color: violet;
}
</style>
